<template>
    <div class="origin">
        <div class="header">
            <div @click="$router.go(-1)" class="header-btnLeft"><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">选择目的地</h1>
            <div class="header-btnRight"></div>
        </div>

        <div class="origin-wrap">
            <div class="origin-wrap-left">
                <ul class="origin-wrap-left-list">
                    <li class="origin-wrap-left-list-item" :class="(idx==index) ? 'active' : ''" v-for="(item,index) in city" @click="tabCity(index)"  >{{item.name}}</li>
                </ul>
            </div>
            <div class="origin-wrap-right">
                <div class="origin-wrap-right-main">
                    <div v-for="(item2,index2) in city[idx].city">
                        <h3 class="origin-wrap-right-main-title">{{item2.name}}</h3>
                        <ul class="origin-wrap-right-main-list">
                            <li class="origin-wrap-right-main-list-item" :class="(tagId==item3.id) ? 'active' : ''"  @click="selectCity(item3.id,item3.name)" v-for="(item3,index3) in item2.city">{{item3.name}}</li>
                        </ul>
                    </div>

                </div>

            </div>
        </div>

    </div>
</template>

<script>
    import storage from '../store/localstorage'
    export default {
        name: "Formulate",

        data() {
            return {
                formulate:'',
                tagId:'',
                tagName:'',
                idx:0,
                city: [{
                    id: 11,
                    name: '美国',
                    city:[
                        {
                            id: 2,
                            name: '加州',
                            city: [
                               {
                                    id: 3,
                                    name: '泸州市'
                                },{
                                    id: 5,
                                    name: '德阳市'
                                },{
                                    id: 3,
                                    name: '广元市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '内江市'
                                },{
                                    id: 3,
                                    name: '乐山市'
                                },{
                                    id: 3,
                                    name: '资阳市'
                                },{
                                    id: 3,
                                    name: '宜宾市'
                                },{
                                    id: 3,
                                    name: '南充市'
                                },{
                                    id: 3,
                                    name: '达州市'
                                }
                            ]
                        },{
                            id: 2,
                            name: '北卡罗州',
                            city: [
                                {
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '内江市'
                                },{
                                    id: 3,
                                    name: '乐山市'
                                },{
                                    id: 3,
                                    name: '资阳市'
                                },{
                                    id: 3,
                                    name: '宜宾市'
                                },{
                                    id: 3,
                                    name: '南充市'
                                },{
                                    id: 3,
                                    name: '达州市'
                                },{
                                    id: 3,
                                    name: '雅安市'
                                },{
                                    id: 3,
                                    name: '阿坝藏族羌族自治州'
                                },{
                                    id: 3,
                                    name: '甘孜藏族自治州'
                                },{
                                    id: 3,
                                    name: '凉山彝族自治州'
                                },{
                                    id: 3,
                                    name: '广安市'
                                },{
                                    id: 3,
                                    name: '巴中市'
                                },{
                                    id: 3,
                                    name: '眉山市'
                                }
                            ]
                        },{
                            id: 2,
                            name: '乔治亚州',
                            city: [
                                {
                                    id: 3,
                                    name: '成都市'
                                },{
                                    id: 3,
                                    name: '绵阳市'
                                },{
                                    id: 3,
                                    name: '自贡市'
                                },{
                                    id: 3,
                                    name: '攀枝花市'
                                },{
                                    id: 3,
                                    name: '泸州市'
                                },{
                                    id: 3,
                                    name: '德阳市'
                                },{
                                    id: 3,
                                    name: '广元市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '内江市'
                                },{
                                    id: 3,
                                    name: '乐山市'
                                },{
                                    id: 3,
                                    name: '资阳市'
                                },{
                                    id: 3,
                                    name: '宜宾市'
                                },{
                                    id: 3,
                                    name: '南充市'
                                },{
                                    id: 3,
                                    name: '达州市'
                                },{
                                    id: 3,
                                    name: '雅安市'
                                },{
                                    id: 3,
                                    name: '阿坝藏族羌族自治州'
                                },{
                                    id: 3,
                                    name: '甘孜藏族自治州'
                                },{
                                    id: 3,
                                    name: '凉山彝族自治州'
                                },{
                                    id: 3,
                                    name: '广安市'
                                },{
                                    id: 3,
                                    name: '巴中市'
                                },{
                                    id: 3,
                                    name: '眉山市'
                                }
                            ]
                        }
                    ]
                },{
                    id: 21,
                    name: '加拿大',
                    city:[
                        {
                            id: 2,
                            name: '阿尔伯塔省',
                            city: [
                                {
                                    id: 3,
                                    name: '资阳市'
                                },{
                                    id: 3,
                                    name: '宜宾市'
                                },{
                                    id: 3,
                                    name: '南充市'
                                },{
                                    id: 3,
                                    name: '达州市'
                                },{
                                    id: 3,
                                    name: '雅安市'
                                },{
                                    id: 3,
                                    name: '阿坝藏族羌族自治州'
                                },{
                                    id: 3,
                                    name: '甘孜藏族自治州'
                                },{
                                    id: 3,
                                    name: '凉山彝族自治州'
                                },{
                                    id: 3,
                                    name: '广安市'
                                },{
                                    id: 3,
                                    name: '巴中市'
                                },{
                                    id: 3,
                                    name: '眉山市'
                                }
                            ]
                        },{
                            id: 2,
                            name: '曼尼托巴省',
                            city: [
                                {
                                    id: 3,
                                    name: '成都市'
                                },{
                                    id: 3,
                                    name: '绵阳市'
                                },{
                                    id: 3,
                                    name: '自贡市'
                                },{
                                    id: 3,
                                    name: '攀枝花市'
                                },{
                                    id: 3,
                                    name: '泸州市'
                                },{
                                    id: 3,
                                    name: '德阳市'
                                },{
                                    id: 3,
                                    name: '广元市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '内江市'
                                },{
                                    id: 3,
                                    name: '乐山市'
                                },{
                                    id: 3,
                                    name: '资阳市'
                                },{
                                    id: 3,
                                    name: '宜宾市'
                                },{
                                    id: 3,
                                    name: '南充市'
                                },{
                                    id: 3,
                                    name: '达州市'
                                },{
                                    id: 3,
                                    name: '雅安市'
                                },{
                                    id: 3,
                                    name: '阿坝藏族羌族自治州'
                                },{
                                    id: 3,
                                    name: '甘孜藏族自治州'
                                },{
                                    id: 3,
                                    name: '凉山彝族自治州'
                                },{
                                    id: 3,
                                    name: '广安市'
                                },{
                                    id: 3,
                                    name: '巴中市'
                                },{
                                    id: 3,
                                    name: '眉山市'
                                }
                            ]
                        },{
                            id: 2,
                            name: '新不伦瑞克省',
                            city: [
                                {
                                    id: 3,
                                    name: '成都市'
                                },{
                                    id: 3,
                                    name: '绵阳市'
                                },{
                                    id: 3,
                                    name: '自贡市'
                                },{
                                    id: 3,
                                    name: '攀枝花市'
                                },{
                                    id: 3,
                                    name: '泸州市'
                                },{
                                    id: 3,
                                    name: '德阳市'
                                },{
                                    id: 3,
                                    name: '广元市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '内江市'
                                }
                            ]
                        }
                        ,{
                            id: 2,
                            name: '魁北克省',
                            city: [
                                {
                                    id: 3,
                                    name: '成都市'
                                },{
                                    id: 3,
                                    name: '绵阳市'
                                },{
                                    id: 3,
                                    name: '自贡市'
                                },{
                                    id: 3,
                                    name: '攀枝花市'
                                },{
                                    id: 3,
                                    name: '泸州市'
                                },{
                                    id: 3,
                                    name: '德阳市'
                                },{
                                    id: 3,
                                    name: '广元市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '遂宁市'
                                },{
                                    id: 3,
                                    name: '内江市'
                                },{
                                    id: 3,
                                    name: '乐山市'
                                },{
                                    id: 3,
                                    name: '资阳市'
                                },{
                                    id: 3,
                                    name: '宜宾市'
                                },{
                                    id: 3,
                                    name: '南充市'
                                },{
                                    id: 3,
                                    name: '达州市'
                                },{
                                    id: 3,
                                    name: '雅安市'
                                },{
                                    id: 3,
                                    name: '阿坝藏族羌族自治州'
                                },{
                                    id: 3,
                                    name: '甘孜藏族自治州'
                                },{
                                    id: 3,
                                    name: '凉山彝族自治州'
                                },{
                                    id: 3,
                                    name: '广安市'
                                },{
                                    id: 3,
                                    name: '巴中市'
                                },{
                                    id: 3,
                                    name: '眉山市'
                                }
                            ]
                        }
                    ]
                },
                ]
            }
        },
        methods: {
            tabCity(index) {
                this.idx = index;
            },
            selectCity(id,name){
                this.formulate=storage.get('formulate');
                this.formulate.tagId=id;
                this.formulate.tagName=name;
                storage.set('formulate',this.formulate);
                this.$router.push('/formulate');
            }
        },
        mounted() {
            this.formulate=storage.get('formulate');
            if(this.formulate){
                this.tagId=this.formulate.tagId || '';
                this.tagName=this.formulate.tagName || '';
            }
        }

    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .header {
        display: flex;
        align-items: center;
        padding: rpx(30);
        justify-content: space-between;
        background: $color0;
        border-bottom: 1px solid $color2;

        &-btnLeft {
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);

            img {
                width: rpx(32);
                height: rpx(32);
            }
        }

        &-btnRight:after {
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }

        &-title {
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }

    .origin {
        position: relative;
        min-height: 100%;

        &-wrap {
            display: flex;

            &-left {
                width: rpx(150);
                background: #f1f1f1;

                &-list {
                    &-item {
                        padding: rpx(30) 0;
                        border-bottom: 1px solid $color2;
                        text-align: center;
                    }

                    .active {
                        background: $color0;
                    }
                }

            }

            &-right {
                flex: 1;
                margin-left: rpx(40);

                &-main {
                    h3 {
                        padding-top: rpx(40);
                        font-size: rpx(28);
                        font-weight: bold;
                    }

                    &-list {
                        display: flex;
                        flex-wrap: wrap;
                        margin-top: rpx(20);

                        &-item {
                            margin-right: rpx(20);
                            margin-bottom: rpx(20);
                            padding: rpx(20);
                            background: #f1f1f1;
                            font-size: rpx(24);
                            color: $color5;

                        }
                        .active{
                            background:url(../assets/formulate_ok.png) no-repeat bottom right $color3;
                            color: #fff;
                        }
                    }
                }
            }
        }
    }
</style>

